import React,{Component} from 'react'
import { Checkbox, Row, Col,Button } from 'antd';
import style from './CheckboxGroup.css'

class Checks extends Component{
    state={
        plainOptions:[],
        checkedList:[],
        json:{},
        
    }
    handleChange(checkedValues){
        
        this.checkedListChange(checkedValues)
    
    }
    handleClickAll=()=>{
        this.checkedListChange(this.state.plainOptions)
    }
    handleClick=()=>{
        const allSet =new Set(this.state.checkedList)
        
        const arr =[];
        this.state.plainOptions.map((item) => {
            if(!allSet.has(item)){
                arr.push(item)
            }
        })
        this.checkedListChange(arr)
       
    }
    clearChecked=()=>{
        this.checkedListChange([])
        
    }
    checkedListChange=(checkedList)=>{
        this.setState({
            checkedList:checkedList
        })
        this.props.change(this.props.groupName,checkedList)
    }
    componentDidMount(){
        const arr = this.props.data;
        let plainOptions = [];
        arr.action_list.map((item)=>{
            plainOptions.push(item.id)
        })

        this.setState({
            plainOptions:plainOptions,
        })
        
    }
    componentWillReceiveProps(nextProps){
        this.setState({
            checkedList:nextProps.checkedList['checked']
        })
        // if(this.props.checkedList != nextProps.checkedList){
        //     this.checkedListChange(nextProps.checkedList['checked'])
        // }
    }
    render(){
        const arr = this.props.data
        return(
            <div className={style.checkboxContain} >
                <div className={style.checkboxGroupTitle} >
                    <span>{arr.display_name}</span>
                    <Button onClick={()=>this.handleClickAll()}>全选</Button>
                    <Button onClick={()=>this.handleClick()}>反选</Button>
                    <Button onClick={()=>this.clearChecked()}>取消选中</Button>
                </div>
                <Checkbox.Group onChange={this.handleChange.bind(this)}  value={this.state.checkedList} className={style.checkboxGroup}>
                    <Row>
                        {arr.action_list.map(item => <Col className={style.checkbox} key={item.id} title={`ID:${item.id} | ${item.action_name}`} span={8}><Checkbox value={item.id} style={{fontSize:14}}>{item.display_name}</Checkbox></Col>)}
                    </Row>
                </Checkbox.Group>
            </div>
        )
    }
}

class CheckboxGroup extends Component{
    constructor(props){
        super(props)
        this.state = {
            plainOptions:[],
            checkedList:[],
            json:{},
            groupList:[],
        }
    }
    componentDidMount(){
        const arr = this.props.checkboxArr
        let plainOptions = [];
        let option = [];
        let json ={};
        arr.action_list.map((item)=>{
           
            option = [];

            item.action_list.map(item =>{
                plainOptions.push(item.id)
                option.push(item.id)
            })
            json[item.group_name] = {
                "group":option,
                "checked":[],
            };
            // json[arr.display_name] = plainOptions;
        })

        this.setState({
            plainOptions:plainOptions,
            json: json
        })
        
    }
    componentWillReceiveProps(nextProps){
        // let json = this.state.json;
        // for (const key in json){
        //     json[key].checked =  nextProps.checkedList[key]['checked']
        // }
        // this.setState({
        //     json: json
        // })
        let json = this.state.json;
        for (const key in json){
            const listSet = new Set(nextProps.checkedList)
            const group = json[key].group;
            const checked =[];
            group.map(item =>{
                if(listSet.has(item)){
                    checked.push(item)
                }
            })
            json[key].checked =  checked
        }
        this.setState({
            json: json
        })
        console.log(json)
    }
    clickAll=()=>{
        const json = this.state.json;
        let arr =[];
        for(let key in json){
            // json[key].checked = json[key].group;
            this.change(key, json[key].group) 
        }
        // this.setState({
        //     json:json
        // })
    }
    reverseSelect=()=>{
        
        const json = this.state.json;
        
        for(let key in json){
            const checkArr = json[key].group;
            const allSet =new Set(json[key].checked)
            const arr =[];
            checkArr.map((item) => {
                if(!allSet.has(item)){
                    arr.push(item)
                }
            })
            this.change(key, arr) 
        }
        // this.setState({
        //     json:json
        // })
    }
    cleanAll=()=>{
        const json = this.state.json;
        let arr =[];
        for(let key in json){
            this.change(key, []) 
        }
        // this.setState({
        //     json:json
        // })
    }
    change=(groupName, checkList)=>{
        let json = this.state.json;
        json[groupName].checked = checkList;
        this.setState({
            json: json
        })
        let list =[];
        for (const key in json){
            list = [...list, ...json[key].checked]
        }
        this.props.onChange(this.props.checkboxArr.service_name, list)
    }
    render(){
        const arr = this.props.checkboxArr;
        return (
            <div className={style.checkmodal}>
                <div className={style.checkmodalTitle} style={{marginBottom:10}}  >
                    <span>{arr.display_name}</span>
                    <Button onClick={()=>this.clickAll()} >全选</Button>
                    <Button onClick={this.reverseSelect} >反选</Button>
                    <Button onClick={this.cleanAll} >取消选中</Button>
                </div>
                {
                    arr.action_list.map((item, index) =>{
                        return(
                            <Checks key={index} change={this.change} groupName={item["group_name"]} checkedList={this.state.json[item["group_name"]]}  data={item} />
                            
                        )
                    })
                }
            </div>
        )
    }
}

export default CheckboxGroup